<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Unstyled example</title>
    <link rel="stylesheet" href="../styles.css" />

    <style class="editable">
      h1 {
      }

      p {
      }
    </style>
  </head>

  <body>
    <section class="preview">
      <h1>I am a level one heading</h1>

      <p>
        This is a paragraph of text. In the text is a
        <span>span element</span> and also a
        <a href="https://example.com">link</a>.
      </p>

      <p>
        This is the second paragraph. It contains an
        <em>emphasized</em> element.
      </p>

      <ul>
        <li>Item one</li>
        <li>Item two</li>
        <li>Item <em>three</em></li>
      </ul>
    </section>

    <textarea class="playable playable-css" style="height: 160px">
h1 {

}

p {

}</textarea
    >

    <textarea class="playable playable-html" style="height: 250px">
<h1>I am a level one heading</h1>

<p>This is a paragraph of text. In the text is a <span>span element</span>
and also a <a href="http://example.com">link</a>.</p>

<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item <em>three</em></li>
</ul></textarea
    >

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script src="../playable.js"></script>
</html>
